<template>
  <div class="sidebar">

    <el-button class="new-chat-btn" type="primary" size="large" @click="addNewChart" :disabled="!canSendFlag">
      <el-icon size="large" style="margin-right: 5px">
        <ChatSquare/>
      </el-icon>
      新建对话
    </el-button>

    <div class="categories">
      <h3 v-if="historyData.length > 0">今天</h3>
      <div v-for="(item,index) in historyData" class="category-item1">
        <div class="category-item" @click="showHistoryChart(item)">
          {{ item.requestAnswerGroupName }}
        </div>
        <div class="item1-right">
          <SidebarOption
              :item="item"
              :index="index"
              :targetArr="historyData"
          />
        </div>
      </div>
      <h3 v-if="historyDataMonth.length > 0">本月</h3>
      <div v-for="(item,index) in historyDataMonth" class="category-item1">
        <div class="category-item" @click="showHistoryChart(item)">
          {{ item.requestAnswerGroupName }}
        </div>
        <div class="item1-right">
          <SidebarOption
              :item="item"
              :index="index"
              :targetArr="historyDataMonth"
          />
        </div>
      </div>
      <h3 v-if="historyDataEarlier.length > 0">更早</h3>
      <div v-for="(item,index) in historyDataEarlier" class="category-item1">
        <div class="category-item" @click="showHistoryChart(item)">
          {{ item.requestAnswerGroupName }}
        </div>
        <div class="item1-right">
          <SidebarOption
              :item="item"
              :index="index"
              :targetArr="historyDataEarlier"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import {ChatSquare} from '@element-plus/icons-vue'
import {
  canSendFlag,
  getSendHistoryByGroupCode,
  historyData,
  historyDataEarlier,
  historyDataMonth,
  initHistoryData,
  initNewChat,
  messages,
  messagesRef,
  requestAnswerGroupCode,
  requestAnswerGroupName
} from "@/api/ai/ai.js";
import SidebarOption from "@/views/ai/chart/SidebarOption.vue";


// 新建对话
function addNewChart() {
  initNewChat()
}

function showHistoryChart(item) {
  if (!canSendFlag.value) {
    return
  }
  messages.value = []
  requestAnswerGroupCode.value = item.requestAnswerGroupCode
  requestAnswerGroupName.value = item.requestAnswerGroupName

  console.log(requestAnswerGroupName.value)
  console.log(requestAnswerGroupCode.value)
  getSendHistoryByGroupCode(item.requestAnswerGroupCode).then(resp => {
    resp.data.forEach(itemData => {
      messages.value.push({
        text: itemData.question,
        reactionText: null,
        isUser: true,
        isReaction: false,
        time: itemData.createTime
      })

      scrollToBottom()

      messages.value.push({
        text: itemData.content,
        reactionText: itemData.reasoningContent,
        isReaction: (itemData.reasoningContent ? itemData.reasoningContent.trim() : '') !== '',
        isUser: false,
        time: itemData.createTime
      })

      scrollToBottom()
    })
  })
}

const scrollToBottom = () => {
  nextTick(() => {
    messagesRef.value.scrollTop = messagesRef.value.scrollHeight
  })
}


initHistoryData()
</script>

<style scoped>

/* 覆盖 el-button 的 hover 样式 */
.custom-button:hover {
  background-color: transparent !important; /* 移除背景色变化 */
  border-color: transparent !important; /* 移除边框变化 */
  box-shadow: none !important; /* 移除阴影 */
  text-decoration: none !important; /* 移除下划线（如果有） */
  color: #004d8c;
}

/* 如果需要，也可以覆盖 focus 样式 */
.custom-button:focus {
  background-color: transparent !important; /* 移除背景色变化 */
  outline: none !important; /* 移除焦点轮廓 */
}

.sidebar {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.new-chat-btn {
  width: 100%;
  margin-bottom: 20px;
  font-size: 16px;
  font-family: "JetBrains Mono Medium";
}

.greeting {
  padding: 15px;
  background-color: #e6f7ff;
  border-radius: 4px;
  margin-bottom: 20px;
  font-size: 14px;
  color: #666;
}

.categories {
  margin-top: 20px;
  overflow-y: scroll;
  /* 隐藏滚动条但保留滚动功能 */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
}

.categories h3 {
  margin: 15px 0 10px;
  font-size: 14px;
  color: #999;
}

.category-item {
  padding: 3px 5px;
  border-radius: 10px;
  font-size: 14px;
  cursor: pointer;
  white-space: nowrap; /* 禁止换行 */
  overflow: hidden; /* 隐藏溢出内容 */
  text-overflow: ellipsis; /* 显示省略号 */
}

.category-item1 {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.category-item1:hover {
  background-color: #f0f0f0;
  border-radius: 8px;
}

.item1-right {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}

.category-item1:hover .item1-right {
  opacity: 1;
  pointer-events: auto;
}


/* Chrome/Safari */
.categories::-webkit-scrollbar {
  width: 6px;
  background: transparent;
}

.categories::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 3px;
}

/* 滚动时显示 */
.categories:active::-webkit-scrollbar-thumb,
.categories:hover::-webkit-scrollbar-thumb,
.categories:focus::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
}

/* 滚动条悬停加深 */
.categories::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.4);
}
</style>